<style>
    #febs-apex-line .layui-card-header {
        font-weight: 600;
    }
</style>
<div class="layui-fluid layui-anim febs-anim" id="febs-apex-line" lay-title="线性图表">
    <div class="layui-row layui-col-space8 febs-container">
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">基本折线图</div>
                <div class="layui-card-body">
                    <div id="basicLineChart"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">带标签的折线图</div>
                <div class="layui-card-body">
                    <div id="lineChartDatalabels"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">可缩放的折线图</div>
                <div class="layui-card-body">
                    <div id="lineChartZoomable"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">带标注的折线图</div>
                <div class="layui-card-body">
                    <div id="lineChartAnnotations"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">同步折线图</div>
                <div class="layui-card-body">
                    <div id="syncingChart1"></div>
                    <div id="syncingChart2"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">台阶折线图</div>
                <div class="layui-card-body">
                    <div id="stepLineChart"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">渐变折线图</div>
                <div class="layui-card-body">
                    <div id="gradientLineChart"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">非连续性折线图</div>
                <div class="layui-card-body">
                    <div id="missNullChart"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">虚线折线图</div>
                <div class="layui-card-body">
                    <div id="dashedChart"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">实时折线图</div>
                <div class="layui-card-body">
                    <div id="realTimeChart"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script data-th-src="@{ep/lay/data/dataSeries.js}"></script>
<script data-th-inline="javascript" type="text/javascript">
    layui.use(['apexcharts', 'febs'], function () {
        let febs = layui.febs;
        // ------------ basicLineChart -------------------
        let basicLineChartOptions = {
            chart: {
                height: 320,
                type: 'line',
                zoom: {
                    enabled: false
                },
                toolbar: {
                    show: false
                }
            },
            dataLabels: {
                enabled: false
            },
            colors: ['#ffbc00'],
            stroke: {
                width: 4,
                curve: 'straight'
            },
            series: [{
                name: "产量",
                data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
            }],
            title: {
                text: '月生产曲线',
                align: 'left'
            },
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            },
            xaxis: {
                categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月']
            }
        };

        new ApexCharts(
            document.querySelector("#basicLineChart"),
            basicLineChartOptions
        ).render();

        // --------------- lineChartDatalabels ----------------
        let lineChartDatalabelsOptions = {
            chart: {
                height: 320,
                type: 'line',
                zoom: {
                    enabled: false
                },
                toolbar: {
                    show: false
                }
            },
            colors: ['#727cf5', '#0acf97'],
            dataLabels: {
                enabled: true
            },
            stroke: {
                width: [3, 3],
                curve: 'smooth'
            },
            series: [{
                name: '最高温',
                data: [28, 29, 33, 36, 32, 32, 33]
            }, {
                name: '最低温',
                data: [12, 11, 14, 18, 17, 13, 13]
            }],
            title: {
                text: '月平均温度曲线',
                align: 'left'
            },
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            },
            markers: {
                style: 'inverted',
                size: 5,
                hover: {
                    size: 6
                }
            },
            xaxis: {
                categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
            },
            yaxis: {
                title: {
                    text: '℃'
                },
                min: 5,
                max: 40
            },
            legend: {
                position: 'top',
                horizontalAlign: 'right',
                floating: true,
                offsetY: -25,
                offsetX: -5
            },
            responsive: [{
                breakpoint: 600,
                options: {
                    chart: {
                        toolbar: {
                            show: false
                        }
                    },
                    legend: {
                        show: false
                    }
                }
            }]
        };

        new ApexCharts(
            document.querySelector("#lineChartDatalabels"),
            lineChartDatalabelsOptions
        ).render();

        // ---------------- lineChartZoomable -------------------
        let ts2 = 14844186e5;
        let dates = [];
        for (let i = 0; i < 120; i++) {
            let innerArr = [ts2 += 864e5, dataSeries[1][i].value];
            dates.push(innerArr);
        }

        let lineChartZoomableOptions = {
            chart: {
                type: 'area',
                stacked: false,
                height: 320,
                zoom: {
                    type: 'x',
                    enabled: true
                },
                toolbar: {
                    autoSelected: 'zoom'
                }
            },
            dataLabels: {
                enabled: false
            },
            series: [{
                name: '价格（元）',
                data: dates
            }],
            markers: {
                size: 0
            },
            title: {
                text: 'XX价格走势图',
                align: 'left'
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    inverseColors: false,
                    opacityFrom: 0.5,
                    opacityTo: 0,
                    stops: [0, 90, 100]
                }
            },
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            },
            yaxis: {
                min: 20000000,
                max: 250000000,
                labels: {
                    formatter: function (val) {
                        return (val / 1000000).toFixed(0);
                    }
                }
            },
            xaxis: {
                type: 'datetime'
            },
            colors: ['#7b88ff'],
            tooltip: {
                shared: false,
                y: {
                    formatter: function (val) {
                        return (val / 1000000).toFixed(0)
                    }
                }
            }
        };

        new ApexCharts(
            document.querySelector("#lineChartZoomable"),
            lineChartZoomableOptions
        ).render();

        // ------------- lineChartAnnotations ----------------

        let lineChartAnnotationsOptions = {
            annotations: {
                yaxis: [{
                    y: 8200,
                    borderColor: '#0acf97',
                    label: {
                        borderColor: '#0acf97',
                        style: {
                            color: '#fff',
                            background: '#0acf97'
                        },
                        text: 'Annotation4'
                    }
                }],
                xaxis: [{
                    x: new Date('23 Nov 2017').getTime(),
                    borderColor: '#775DD0',
                    label: {
                        borderColor: '#775DD0',
                        style: {
                            color: '#fff',
                            background: '#775DD0'
                        },
                        text: 'Annotation3'
                    }
                }, {
                    x: new Date('03 Dec 2017').getTime(),
                    borderColor: '#ffbc00',
                    label: {
                        borderColor: '#ffbc00',
                        style: {
                            color: '#fff',
                            background: '#ffbc00'
                        },
                        orientation: 'horizontal',
                        text: 'Annotation2'
                    }
                }],
                points: [{
                    x: new Date('27 Nov 2017').getTime(),
                    y: 8506.9,
                    marker: {
                        size: 8,
                        fillColor: '#fff',
                        strokeColor: '#fa5c7c',
                        radius: 2
                    },
                    label: {
                        borderColor: '#fa5c7c',
                        offsetY: 0,
                        style: {
                            color: '#fff',
                            background: '#fa5c7c'
                        },
                        text: 'Annotation1'
                    }
                }]
            },
            chart: {
                height: 320,
                type: 'line',
                id: 'areachart-2',
                toolbar: {
                    show: false
                }
            },
            colors: ['#ff3e6d'],
            dataLabels: {
                enabled: false
            },
            stroke: {
                width: [3],
                curve: 'straight'
            },
            series: [{
                data: [
                    8107.85,
                    8128.0,
                    8122.9,
                    8165.5,
                    8340.7,
                    8423.7,
                    8423.5,
                    8514.3,
                    8481.85,
                    8487.7,
                    8506.9,
                    8626.2,
                    8668.95,
                    8602.3,
                    8607.55,
                    8512.9,
                    8496.25,
                    8600.65,
                    8881.1,
                    9340.85
                ]
            }],
            title: {
                text: '标注测试',
                align: 'left'
            },
            labels: [
                '13 Nov 2017',
                '14 Nov 2017',
                '15 Nov 2017',
                '16 Nov 2017',
                '17 Nov 2017',
                '20 Nov 2017',
                '21 Nov 2017',
                '22 Nov 2017',
                '23 Nov 2017',
                '24 Nov 2017',
                '27 Nov 2017',
                '28 Nov 2017',
                '29 Nov 2017',
                '30 Nov 2017',
                '01 Dec 2017',
                '04 Dec 2017',
                '05 Dec 2017',
                '06 Dec 2017',
                '07 Dec 2017',
                '08 Dec 2017'
            ],
            xaxis: {
                type: 'datetime'
            },
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            },
            responsive: [{
                breakpoint: 600,
                options: {
                    chart: {
                        toolbar: {
                            show: false
                        }
                    },
                    legend: {
                        show: false
                    }
                }
            }]
        };

        new ApexCharts(
            document.querySelector("#lineChartAnnotations"),
            lineChartAnnotationsOptions
        ).render();

        // ------------- syncingChart ---------------------

        let syncChartOption1 = {
            chart: {
                id: 'fb',
                group: 'social',
                type: 'line',
                height: 160,
                toolbar: {
                    show: false
                }
            },
            colors: ['#008FFB'],
            series: [{
                data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
                    min: 10,
                    max: 60
                })
            }],
            yaxis: {
                labels: {
                    minWidth: 40
                }
            },
            xaxis: {
                type: 'datetime'
            },
            markers: {
                size: 5,
                hover: {
                    size: 6
                }
            },
            stroke: {
                width: [3, 3]
            },
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            }
        };

        new ApexCharts(
            document.querySelector("#syncingChart1"),
            syncChartOption1
        ).render();

        let syncChartOption2 = {
            chart: {
                id: 'tw',
                group: 'social',
                type: 'line',
                height: 160,
                toolbar: {
                    show: false
                }
            },
            colors: ['#546E7A'],
            series: [{
                data: generateDayWiseTimeSeries(new Date('11 Feb 2017').getTime(), 20, {
                    min: 10,
                    max: 30
                })
            }],
            yaxis: {
                labels: {
                    minWidth: 40
                }
            },
            xaxis: {
                type: 'datetime'
            },
            markers: {
                size: 5,
                hover: {
                    size: 6
                }
            },
            stroke: {
                width: [3, 3]
            },
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            }
        };

        new ApexCharts(
            document.querySelector("#syncingChart2"),
            syncChartOption2
        ).render();

        function generateDayWiseTimeSeries(baseval, count, yrange) {
            let i = 0;
            let series = [];
            while (i < count) {
                let x = baseval;
                let y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

                series.push([x, y]);
                baseval += 86400000;
                i++;
            }
            return series;
        }

        // ----------------- stepLineChart ---------------------
        let stepLineChartOptions = {
            chart: {
                type: 'line',
                height: 335,
                toolbar: {
                    show: false
                }
            },
            stroke: {
                width: 3,
                curve: 'stepline'
            },
            dataLabels: {
                enabled: false
            },
            series: [{
                data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
            }],
            colors: ['#0acf97'],
            markers: {
                hover: {
                    sizeOffset: 4
                }
            },
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            }

        };

        new ApexCharts(
            document.querySelector("#stepLineChart"),
            stepLineChartOptions
        ).render();

        // ----------------- gradientLineChart ---------------------
        let gradientLineChartOptions = {
            chart: {
                height: 320,
                type: 'line',
                shadow: {
                    enabled: false,
                    color: '#bbb',
                    top: 3,
                    left: 2,
                    blur: 3,
                    opacity: 1
                },
                toolbar: {
                    show: false
                }
            },
            stroke: {
                width: 5,
                curve: 'smooth'
            },
            series: [{
                name: 'Likes',
                data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5]
            }],
            xaxis: {
                type: 'datetime',
                categories: ['1/11/2000', '2/11/2000', '3/11/2000', '4/11/2000', '5/11/2000', '6/11/2000', '7/11/2000', '8/11/2000', '9/11/2000', '10/11/2000', '11/11/2000', '12/11/2000', '1/11/2001', '2/11/2001', '3/11/2001', '4/11/2001', '5/11/2001', '6/11/2001']
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'dark',
                    gradientToColors: ['#FDD835'],
                    shadeIntensity: 1,
                    type: 'horizontal',
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 100, 100, 100]
                }
            },
            markers: {
                size: 4,
                opacity: 0.9,
                colors: ["#FFA41B"],
                strokeColor: "#fff",
                strokeWidth: 2,

                hover: {
                    size: 5
                }
            },
            yaxis: {
                min: -10,
                max: 40
            },
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            }
        };

        let chart = new ApexCharts(
            document.querySelector("#gradientLineChart"),
            gradientLineChartOptions
        ).render();

        // ------------ missNullChart -----------------------
        let missNullChartOptions = {
            chart: {
                height: 320,
                type: 'line',
                zoom: {
                    enabled: false
                },
                animations: {
                    enabled: false
                },
                toolbar: {
                    show: false
                }
            },
            stroke: {
                width: [3, 3, 3],
                curve: 'straight'
            },

            series: [{
                name: 'Peter',
                data: [5, 5, 10, 8, 7, 5, 4, null, null, null, 10, 10, 7, 8, 6, 9]
            }, {
                name: 'Johnny',
                data: [10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null]
            }, {
                name: 'David',
                data: [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null]
            }],
            labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
            xaxis: {},
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            }

        };

        new ApexCharts(
            document.querySelector("#missNullChart"),
            missNullChartOptions
        ).render();

        // -------------- dashedChart -----------------
        let dashedChartOptions = {
            chart: {
                height: 320,
                type: 'line',
                zoom: {
                    enabled: false
                },
                toolbar: {
                    show: false
                }
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                width: [3, 3, 3],
                curve: 'straight',
                dashArray: [0, 8, 5]
            },
            series: [{
                name: "Durations",
                data: [45, 52, 38, 24, 33, 26, 21, 20, 6]
            },
                {
                    name: "Views",
                    data: [35, 41, 62, 42, 13, 18, 29, 37, 36]
                },
                {
                    name: 'Visits',
                    data: [87, 57, 74, 99, 75, 38, 62, 47, 82]
                }
            ],
            markers: {
                size: 0,
                hover: {
                    sizeOffset: 6
                }
            },
            xaxis: {
                categories: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan', '06 Jan', '07 Jan', '08 Jan', '09 Jan']
            },
            tooltip: {
                y: [{
                    title: {
                        formatter: function (val) {
                            return val + " (mins)"
                        }
                    }
                }, {
                    title: {
                        formatter: function (val) {
                            return val + " per session"
                        }
                    }
                }, {
                    title: {
                        formatter: function (val) {
                            return val;
                        }
                    }
                }]
            },
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            }
        };

        new ApexCharts(
            document.querySelector("#dashedChart"),
            dashedChartOptions
        ).render();

        // ------------ realTimeChart -------------------

        let lastDate = 0;
        let data = [];
        let TICKINTERVAL = 86400000;
        let XAXISRANGE = 777600000;

        function getDayWiseTimeSeries(baseval, count, yrange) {
            let i = 0;
            while (i < count) {
                let x = baseval;
                let y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

                data.push({x: x, y: y});
                lastDate = baseval;
                baseval += TICKINTERVAL;
                i++;
            }
        }

        getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
            min: 10,
            max: 90
        });

        function getNewSeries(baseval, yrange) {
            let newDate = baseval + TICKINTERVAL;
            lastDate = newDate;

            for (let i = 0; i < data.length - 10; i++) {
                data[i].x = newDate - XAXISRANGE - TICKINTERVAL;
                data[i].y = 0
            }
            data.push({
                x: newDate,
                y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
            })

        }

        function resetData() {
            data = data.slice(data.length - 10, data.length);
        }

        let realTimeChartOptions = {
            chart: {
                height: 320,
                type: 'area',
                animations: {
                    enabled: true,
                    easing: 'linear',
                    dynamicAnimation: {
                        speed: 1000
                    }
                },
                toolbar: {
                    show: false
                },
                zoom: {
                    enabled: false
                }
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth'
            },
            series: [{
                data: data
            }],
            markers: {
                size: 0
            },
            colors: ['#ff8a5c'],
            xaxis: {
                type: 'datetime',
                range: XAXISRANGE
            },
            yaxis: {
                max: 100
            },
            legend: {
                show: false
            },
            grid: {
                row: {
                    colors: ['transparent', 'transparent'],
                    opacity: 0.2
                },
                borderColor: '#f1f3fa'
            }
        };

        let realTimeChart = new ApexCharts(
            document.querySelector("#realTimeChart"),
            realTimeChartOptions
        );

        realTimeChart.render();

        let interval = setInterval(function () {
            let urlHash = window.location.hash;
            if (urlHash.indexOf('apex/line') !== -1) {
                getNewSeries(lastDate, {
                    min: 10,
                    max: 90
                });
                realTimeChart.updateSeries([{
                    data: data
                }]);
            }
        }, 1000);

        febs.routeLeave(function (route, nextPath, next) {
            clearInterval(interval);
            next();
        })
    });
</script>